<!-- 我的 -->
<template>
  <div style="background:white;">
    <div class="personal flex_wrap">
      <div class="touxiang">
        <img src="../../static/images/icon/logo.png" />
      </div>
      <div class="info">
        <div class="usename">{{useInfo.carrier_name}}</div>
        <div class="didian">{{useInfo.driver_name}}</div>
      </div>
      <div class="qiandao_wrap">

      </div>
    </div>
    <div class="main">
      <mt-cell title="个人信息" to="personal" is-link>
        <img slot="icon" src="../../static/images/mine/4@2x.png" width="24" height="24">
      </mt-cell>
      <mt-cell title="操作指南" to="instructions" is-link>
        <span></span>
        <img slot="icon" src="../../static/images/mine/6@2x.png" width="24" height="24">
      </mt-cell>
      <mt-cell title="通讯录" to="addressBook" is-link>
        <span></span>
        <img slot="icon" src="../../static/images/mine/5@2x.png" width="24" height="24">
      </mt-cell>
      <mt-cell title="修改密码" to="password" is-link>
        <img slot="icon" src="../../static/images/mine/9@2x.png" width="24" height="24">
      </mt-cell>
      <button class="quit_button" @click="quit()">退出</button>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        useInfo: {},
      }
    },
    created() {//获取用户信息
      this.useInfo = JSON.parse(sessionStorage.getItem("loginData"));
    },
    methods: {
      quit() {
          var that = this;
        MessageBox.confirm('确定要退出吗?').then(action => {
          sessionStorage.removeItem('loginData');
          that.$router.push({
            'name': 'login'
          })
        }).catch(err => {
          
        });
      }
    },

  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .flex_wrap {
    display: flex;
    display: -webkit-flex;
  }

  .touxiang {
    width: 2.3rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .touxiang img {
    width: 1.6rem;
    height: 1.6rem;
  }

  .info {
    width: 4rem;
    text-align: left;
  }

  .info .didian {
    font-size: 0.5rem;
    height: auto;
    color: black;
  }

  .info .usename {
    font-size: 0.5rem;
    padding-top: 0.8rem;
    height: auto;
  }

  .qiandao_wrap {
    width: 3rem;
    display: flex;
    align-items: center;
  }

  .qiandao {
    background: #ffb31f;
    height: 1rem;
    width: auto;
    padding: 0.22rem 0.2rem;
    border-radius: 0.1rem;
    color: white;
    font-size: 0.2rem;
  }

  .weizhi {
    background-image: url("../../static/images/mine/weizhi.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.25rem;
    height: 0.35rem;
    margin-right: 0.14rem;
  }

  .personal {
    /* background-image: url('../../static/images/mine/personal_bg.jpg'); */
    background-color: white;
    background-size: 100% 100%;
    height: 2.8rem;
    width: 100%;
    justify-content: space-between;
  }

  .personal div {
    height: 100%;
  }

  .main {
    text-align: left;
  }

  .menu_button {
    width: 2rem;
    height: 2rem;
    border: 1px solid red;
  }

  .msgnum {
    display: inline-block;
    height: 0.6rem;
    padding: 0 0.2rem;
    line-height: 0.6rem;
    border-radius: 0.3rem;
    background: #e53623;
    color: #fff;
    text-align: center;
  }


  .quit_button {
    width: 9rem;
    height: 1.2rem;
    border-radius: 0.3rem;
    margin-left: 0.5rem;
    margin-top: 2.8rem;
    background-color: #e64340;
    border: none;
    outline: none;
    font-size: 0.5rem;
    color: white;
  }

</style>
